<extend name="Base/base" />
<block name="button">
	
	<button class="btn btn-primary" type="submit" form="form"><i class="fa fa-save"></i> {:L('text_save')}</button>
</block>
<block name="body">
	<if condition="$msg">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
		      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		      {$msg.warning}

		    </div>
	</if>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4><i class="fa fa-pencil fa-fw"></i>  {$heading_title}</h4>
		</div>
		<div class="panel-body">
			<form action="" method="post" id="form" class="form-horizontal">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab-general" data-toggle="tab">{:L('text_general')}</a>
					</li>
					<li>
						<a href="#tab-advanced" data-toggle="tab">{:L('text_advanced')}</a>
					</li>
					<li>
						<a href="#tab-image" data-toggle="tab">{:L('text_image')}</a>
					</li>					
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-general">
						<ul class="nav nav-tabs">
							<foreach name="languages" key="key" item="language">
								<li class="{$key?'':'active'}">
									<a href="#language{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
								</li>
							</foreach>
						</ul>
						<div class="tab-content">
							<foreach name="languages" key="key" item="language">
								<div class="tab-pane {$key?'':'active'}" id="language{$language.language_id}">
									<div class="form-group required">
										<label for="input-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_title')}</label>
										<div class="col-sm-10">
											<input type="text" name="article_description[{$language.language_id}][title]" value="{$article['article_description'][$language['language_id']]['title']|default=''}" placeholder="{:L('entry_title')}" id="iput-title{$language.language_id}" class="form-control">
											<if condition="isset($msg['title'][$language['language_id']])">
											{:danger_msg($msg['title'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-content{$language.language_id}" class="col-sm-2 control-label">{:L('entry_content')}</label>
										<div class="col-sm-10">
											<textarea name="article_description[{$language.language_id}][content]" id="input-content{$language.language_id}" class="form-control summernote" placeholder="{:L('entry_content')}">{$article['article_description'][$language['language_id']]['content']|default=''}</textarea>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_title')}</label>
										<div class="col-sm-10">
											<input type="text" name="article_description[{$language.language_id}][meta_title]" value="{$article['article_description'][$language['language_id']]['meta_title']|default=''}" placeholder="{:L('entry_meta_title')}" id="iput-meta-title{$language.language_id}" class="form-control">
											<if condition="isset($msg['meta_title'][$language['language_id']])">
											{:danger_msg($msg['meta_title'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-description{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_description')}</label>
										<div class="col-sm-10">
											<textarea rows="5"  name="article_description[{$language.language_id}][meta_description]"  placeholder="{:L('entry_meta_description')}" id="input-meta-description{$language.language_id}" class="form-control">{$article['article_description'][$language['language_id']]['meta_description']|default=''}</textarea>
											<if condition="isset($msg['meta_description'][$language['language_id']])">
											{:danger_msg($msg['meta_description'][$language['language_id']])}
											</if>
										</div>
									</div>
									<div class="form-group">
										<label for="input-meta-keyword{$language.language_id}" class="col-sm-2 control-label">{:L('entry_meta_keyword')}</label>
										<div class="col-sm-10">
											<textarea rows="5"  name="article_description[{$language.language_id}][meta_keyword]"  placeholder="{:L('entry_meta_keyword')}" id="input-meta-description{$language.language_id}" class="form-control">{$article['article_description'][$language['language_id']]['meta_keyword']|default=''}</textarea>
											<if condition="isset($msg['meta_keyword'][$language['language_id']])">
											{:danger_msg($msg['meta_keyword'][$language['language_id']])}
											</if>
										</div>
									</div>
								</div>
							</foreach>
						</div>
					</div>
					<div class="tab-pane" id="tab-advanced">
						<div class="form-group">
							<label for="input-image" class="control-label col-sm-2">{:L('entry_image')}</label>
							<div class="col-sm-10">
								<a href="" id="thumb-image" data-toggle="image" class="img-thumbnail"><img src="{$article['thumb']}" alt="" title="" data-placeholder="{$article['placeholder']}" /></a>
                  				<input type="hidden" name="image" value="{$article['image']}" id="input-image" />
							</div>
						</div>
						<div class="form-group">
							<label for="input-href" class="col-sm-2 control-label">{:L('entry_href')}</label>
							<div class="col-sm-10">
								<input id="input-href"
								class="form-control" type="text" name="href" placeholder="{:L('entry_href')}" value="{$article.href|default=''}">
							</div>
						</div>
						<div class="form-group">
							<label for="input-category" class="col-sm-2 control-label">{:L('entry_category')}</label>
							<div class="col-sm-10">
								<select name="article_category_id" id="input-category" class="form-control">									
									<foreach name="article_categories" item="item">
										<option value="{$item.article_category_id}" <if condition="isset($article['article_category_id']) && $item['article_category_id'] eq $article['article_category_id']">selected</if>>{$item.html}{$item.title}</option>
									</foreach>
								</select>
							</div>
						</div>
						<!--<div class="form-group">-->
							<!--<label for="input-template" class="col-sm-2 control-label">{:L('entry_template')}</label>-->
							<!--<div class="col-sm-10">-->
								<!--<input type="text" class="form-control" id="input-template" name="template" placeholder="{:L('entry_template')}">-->
								<!--<if condition="isset($msg['template'])">-->
									<!--{:danger_msg($msg['template'])}-->
								<!--</if>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
							<!--<label for="input-article" class="col-sm-2 control-label">{:L('entry_related')}</label>-->
							<!--<div class="col-sm-10">-->
								<!--<input type="text" id="input-article" name="article_title"  class="form-control" placeholder="{:L('entry_related')}" autocomplete="off">-->
								<!--<div id="article-related" class="well well-sm" style="height: 150px; overflow: auto;">-->
					                <!--<foreach name="article['article_related']" item="related">-->
					                <!--<div id="article-related{$related.article_id}"><i class="fa fa-minus-circle"></i> {$related.title}-->
					                  <!--<input type="hidden" name="article_related[]" value="{$related.article_id}" />-->
					                <!--</div>-->
					                <!--</foreach>-->
					            <!--</div>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="form-group">-->
							<!--<label for="input-download" class="col-sm-2 control-label">{:L('entry_download')}</label>-->
							<!--<div class="col-sm-10">-->
								<!--<input type="text" id="input-download" name="download_name"  class="form-control" placeholder="{:L('entry_download')}" autocomplete="off">-->
								<!--<div id="article-download" class="well well-sm" style="height: 150px; overflow: auto;">-->
					                <!--<foreach name="article['article_download']" item="download">-->
					                <!--<div id="article-download-{$download.download_id}"><i class="fa fa-minus-circle"></i> {$download.name}-->
					                  <!--<input type="hidden" name="article_download[]" value="{$download.download_id}" />-->
					                <!--</div>-->
					                <!--</foreach>-->
					            <!--</div>-->
							<!--</div>-->
						<!--</div>-->
						<div class="form-group">
							<label for="input-sort-order" class="col-sm-2 control-label">{:L('entry_sort_order')}</label>
							<div class="col-sm-10">
								<input type="number" class="form-control" value="{$article['sort_order']|default=''}"  id="input-sort-order" name="sort_order" placeholder="{:L('entry_sort_order')}">
							</div>					
						</div>						
						<div class="form-group">
							<label for="input-status" class="control-label col-sm-2">{:L('text_status')}</label>
							<div class="col-sm-10">
								<select name="status" id="input-status" class="form-control">
									<option value="1">{:L('text_enabled')}</option>
									<option <if condition="isset($article['status']) && ($article['status'] eq 0)">selected</if> value="0">{:L('text_disabled')}</option>						
								</select>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-image">
						<div class="table-responsive">
							<table id="images" class="table table-striped table-bordered table-hover">
								<thead>
				                    <tr>
				                      <th style="width:120px;" class="text-left">{:L('entry_image')}</th>
				                      <th class="text-left">{:L('entry_sort_order')}</th>
				                      <th>{:L('entry_title')}</th>
				                      <th>{:L('text_action')}</th>
				                    </tr>
				                  </thead>				                  
				                  <tbody>
				                  	<foreach name="article['article_image']" key="image_row" item="article_image">
										<tr id="image-row{$image_row}">
					                      <td class="text-left"><a href="" id="thumb-image{$image_row}" data-toggle="image" class="img-thumbnail"><img src="{$article_image.thumb}" alt="" title="" data-placeholder="{$article.placeholder}" /></a><input type="hidden" name="article_image[{$image_row}][image]" value="{$article_image.image}" id="input-image{$image_row}" /></td>
					                      <td class="text-left"><input type="number" name="article_image[{$image_row}][sort_order]" value="{$article_image.sort_order}" placeholder="{:L('entry_sort_order')}" class="form-control" /></td>
					                      <td>
					                      	<ul class="nav nav-tabs">
												<foreach name="languages" key="key" item="language">
													<li class="{$key?'':'active'}">
														<a href="#language{$image_row}-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
													</li>
												</foreach>
											</ul>
											<div class="tab-content">
												<foreach name="languages" key="key" item="language">
												<div id="language{$image_row}-{$language.language_id}" class="tab-pane {$key?'':'active'}">
													<textarea class="form-control" rows="5" placeholder="{:L('entry_title')}" name="article_image[{$image_row}][text][{$language.language_id}][title]">{$article_image['text'][$language['language_id']]['title']}</textarea>
												</div>
												</foreach>
											</div>
					                      </td>
					                      <td class="text-left"><button type="button" onclick="$('#image-row{$image_row}').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
					                    </tr>	
									</foreach>
				                  </tbody>
				                  <tfoot>
				                    <tr>
				                      <td colspan="3"></td>
				                      <td class="text-left"><button type="button" onclick="addImage();" data-toggle="tooltip" title="{:L('button_image_add')}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
				                    </tr>
				                  </tfoot>
							</table>
						</div>
					</div>					
				</div>
			</form>
			
		</div>
		
	</div>
</block>
<block name="script">
	<script type="text/javascript">
		var image_row	=	{$image_row|default=0}+1;
		function addImage() {
			html  = '<tr id="image-row' + image_row + '">';
			html += '  <td class="text-left"><a href="" id="thumb-image' + image_row + '"data-toggle="image" class="img-thumbnail"><img src="{$article['placeholder']}" alt="" title="" data-placeholder="{$article['placeholder']}" /></a><input type="hidden" name="article_image[' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';
			html += '  <td class="text-left"><input type="text" name="article_image[' + image_row + '][sort_order]" value="" placeholder="{:L('entry_sort_order')}" class="form-control" /></td>';
			html += '	<td>';
            html += '      <ul class="nav nav-tabs">';
							<foreach name="languages" key="key" item="language">
			html += '		<li class="{$key?'':'active'}">';
			html += '			<a href="#language'+image_row+'-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>';
			html += '		</li>';
							</foreach>
			html += '	  </ul>';
			html += '	<div class="tab-content">';
							<foreach name="languages" key="key" item="language">
			html += '		<div id="language' + image_row + '-{$language.language_id}" class="tab-pane {$key?'':'active'}">';
			html += '			<textarea class="form-control" rows="5" placeholder="{:L('entry_title')}" name="article_image[' + image_row + '][text][{$language.language_id}][title]"></textarea>';
			html += '		</div>';
							</foreach>
			html += '	</div>';
            html += '   </td>';
			html += '  <td class="text-left"><button type="button" onclick="$(\'#image-row' + image_row  + '\').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
			html += '</tr>';

			$('#images tbody').append(html);

			image_row++;
		}
	</script>
	<script type="text/javascript">
		$(function(){
			var autourl='{:U("Article/autocomplete")}';
			$('input[name=\'article_title\']').autocomplete({'source': function(request, response) {
					$.ajax({
						url: autourl + (autourl.indexOf('?')<0?'?':'&') + 'filter_title=' +  encodeURIComponent(request),
						dataType: 'json',
						success: function(json) {
							response($.map(json, function(item) {
								return {
									label: item['title'],
									value: item['article_id']
								}
							}));
						}
					});
				},
				'select': function(item) {
					$('input[name=\'article_title\']').val('');		
					$('#article-related' + item['value']).remove();
					$('#article-related').append('<div id="article-related' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="article_related[]" value="' + item['value'] + '" /></div>');	
				}
			});
			$('#article-related').delegate('.fa-minus-circle', 'click', function() {
				$(this).parent().remove();
			});	
		});
		$(function(){
			var downloadurl='{:U("Download/autocomplete")}';
			$('input[name=\'download_name\']').autocomplete({'source': function(request, response) {
					$.ajax({
						url: downloadurl + (downloadurl.indexOf('?')<0?'?':'&') + 'filter_name=' +  encodeURIComponent(request),
						dataType: 'json',
						success: function(json) {
							response($.map(json, function(item) {
								return {
									label: item['name'],
									value: item['download_id']
								}
							}));
						}
					});
				},
				'select': function(item) {
					$('input[name=\'download_name\']').val('');		
					$('#article-download-' + item['value']).remove();
					$('#article-download').append('<div id="article-download-' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="article_download[]" value="' + item['value'] + '" /></div>');	
				}
			});
			$('#article-download').delegate('.fa-minus-circle', 'click', function() {
				$(this).parent().remove();
			});
		});
	</script>

</block>